<template>
    <section>
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="primary" @click="showAdd" icon="el-icon-plus">新增课程</el-button>
                </el-form-item>

                <el-form-item style="float: right">
                    <el-button type="primary" @click="getschoolofcourse(schoolid)" icon="el-icon-search" >筛选</el-button>
                </el-form-item>

                <el-form-item style="float: right">
                    <el-select v-model="schoolid" placeholder="请选择学院" style="width:150px">
                        <el-option
                                v-for="item in school"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item style="float: right;">
                    <el-input v-model="findcourse" placeholder="请输入课程名" style="width:200px" clearable></el-input>
                    <el-button type="primary" @click="coursesearch" icon="el-icon-search" style="margin-left: 15px;">查询
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <el-table :data="courseList" border highlight-current-row style="width: 100%;font-size:25px">
            <el-table-column header-align="center" align="center" type="index" width="50" ></el-table-column>
            <el-table-column header-align="center" align="center" label="课程名称" min-width="150" prop="name" ></el-table-column>
            <el-table-column header-align="center" align="center" label="创建者" min-width="150" prop="creator.user.realname"></el-table-column>
            <el-table-column header-align="center" align="center" label="操作" min-width="300" prop="courseList">
                <template slot-scope="scope">
                    <el-button size="mini" @click="GoCourse(scope.row.id,scope.row.name)" icon="el-icon-edit">知识点树</el-button>
                    <el-button size="mini" @click="GoExampaper(scope.row.id)" icon="el-icon-edit">试卷</el-button>
                    <el-button size="mini" @click="GoExercise(scope.row.id)" icon="el-icon-edit">题库</el-button>
                    <el-button size="mini" @click="claimCourse(scope.row.id)" icon="el-icon-edit">认领课程</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--新增课程界面-->
        <el-dialog :title="formTitle" :visible.sync="formVisible" :close-on-click-modal="false">
            <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
                <el-form-item label="课程名" prop="name">
                    <el-input v-model="formData.name" :disabled="action!='add'" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="formVisible = false">取消</el-button>
                <el-button type="primary" @click.native="saveSubmit" :loading="submitLoading">提交</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>
    export default {
        name: "course-manage",
        data(){
            return{//当前用户数据
                findcourse:'',
                school:[],
                schoolid:'',
                user:{id:''},
                teacherInfo:{id:''},
                //表单数据
                action: '', // 'add'-添加，'edit'-编辑，'detail'-详情，'find"-筛选
                formTitle: '', //界面标题
                formVisible: false, //界面是否显示
                formData:{
                    name:'',
                    creatorid:'',
                    maintainerid:'',
                },
                formRules:{
                    name:[
                        {required:true,message:'请输入课程名',trigger:'blur'}
                    ]
                },
                submitLoading:false,
                total: 0,
                pageIndex: 1, //页码
                pageSize: this.CONSTANT.PAGE_SIZE, //分页大小
                pageSizes: this.CONSTANT.PAGE_SIZES, //分页大小选择列表
                courseList:[],
            }
        },
        methods:{
            claimCourse(courseid){
                let addData={
                    courseid: courseid,
                    teacherid:this.teacherInfo.id,
                    iscreator:'2',
                };
                this.$http.post('api/courseteach/add',addData).then(res=>{
                    this.$message({
                        message: '认领课程成功！',
                        type: 'success'
                    });

                })
            },
            coursesearch(){
                let para = {
                    keyword: this.findcourse,
                };
                this.$http.post('api/course/findCoursesAndCreatorDetailByCondition/',para).then(res=>{
                    this.courseList=res.data.data;
                    console.log(res.data.data);
                })
            },
            showAdd(){
                this.formVisible = true;
                this.formData= {
                    name: '',
                    creatorid:this.teacherInfo.id,
                    maintainerid:1,
                };
                this.action = "add";
                this.formTitle = '新增课程';
            },
            getCourseList(){
                this.$http.get("/api/courseteach/findCoursesDistinctByTeacherid/"+this.teacherInfo.id).then((res)=>{
                    this.courseList = res.data.data;
                    console.log(this.courseList);
                }).catch((error)=>{
                    console.log(error);
                })
                this.$http.get('/api/school/findAllschool/').then((res)=>{
                    this.school=res.data.data;
                });
            },
            GoCourse(num,name){
                this.$router.push({path:'/CourseDetail',query:{courseid:num,coursename:name}});
            },
            GoExampaper(value){
                this.$router.push({path:'/exampaper',query:{courseid:value}});
            },
            GoExercise(value){
                this.$router.push({path:'/importexercise',query:{courseid:value}});
            },
            saveSubmit: function () { //保存：新增/编辑
                let apiPath = '';
                if (this.action == 'add') {

                    apiPath = '/api/course/add';
                } else {
                    apiPath = '/api/user/modify';
                }
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    this.submitLoading = true;
                    let para = Object.assign({}, this.formData);
                        this.$http.post(apiPath, para).then(res => {
                            this.submitLoading = false;
                            if (res.data.code == 0) {
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                this.$refs['formData'].resetFields();
                                this.formVisible = false;
                                this.getCourseList(); //重新加载数据
                            } else {
                                this.$message({
                                    message: '提交失败',
                                    type: 'error'
                                });
                            }
                        }).catch((error) => {
                            this.submitLoading = false;
                            if (error) console.log(error);
                        });
                });
            },
            getschoolofcourse:function (num) {
                // console.log(this.schoolid);
                // console.log(num);
                this.action='find';
                this.$http.post("/api/course/findCourseByschoolid/"+this.schoolid).then((res)=>{
                    this.courseList = res.data.data;
                    /*console.log(this.courseList);*/
                }).catch((error)=>{
                    console.log(error);
                })
                // console.log(this.courseList);
            },
        },
        mounted(){
            this.user = JSON.parse(localStorage.getItem("CurrentUser"));
            this.$http.get("/api/teacherinfo/findTeacherByUserid/"+this.user.id).then((res)=>{
                this.teacherInfo = res.data.teacherInfo;//加载教师信息
                this.getCourseList();
            }).catch((error)=>{
                console.log(error);
            });
        }
    }
</script>
